<template>
  <div class="statistics-container">
    <!-- 头部标题 -->
    <div class="header">
      <span class="back-icon"></span>
      <span class="title">神农小程序用户名</span>
    </div>

    <!-- 今日数据概览 -->
    <div class="data-overview">
      <div class="overview-header">
        <span class="header-title">近7日数据</span>
      </div>
      <div class="overview-grid">
        <div class="grid-item">
          <div class="item-label">浏览</div>
          <div class="item-value">3627</div>
          <div class="item-trend up">+12%</div>
        </div>
        <div class="grid-item">
          <div class="item-label">互动数</div>
          <div class="item-value">11</div>
          <div class="item-trend up">+25%</div>
        </div>
        <div class="grid-item">
          <div class="item-label">新增粉丝</div>
          <div class="item-value">13</div>
          <div class="item-trend down">-20%</div>
        </div>
        <div class="grid-item">
          <div class="item-label">主页访客</div>
          <div class="item-value">13</div>
          <div class="item-trend up">+20%</div>
        </div>
      </div>
      <!-- 示例笔记 -->
      <div class="note-preview">
        <image
          class="note-image"
          src="https://pic.hedashepin.com/upload/3/20250126/fcf59458af13a934059eb284fd1ea7ed.png"
        >
        </image>

        <div class="note-info">
          <div class="note-tag">
            <span class="note-t">美食</span>
            <span class="note-t">分享</span>
            <span class="note-t">推荐</span>
          </div>
          <div class="note-title note-info-flex">
            这是一个示例笔记标题，展示用户发布的内容
          </div>
          <div class="note-stats">
            <span>点赞 99+</span>
            <span>评论 45</span>
            <span>收藏 32</span>
          </div>
        </div>
        <div class="note-info-span">></div>
      </div>
    </div>

    <!-- 商品评分统计 -->
    <div class="product-section">
      <div class="section-header">
        <span class="section-title">商品评分统计</span>
        <div class="tab-group">
          <span class="tab active">全部</span>
          <span class="tab">近一月</span>
        </div>
      </div>
      <div class="product-table">
        <div class="table-header">
          <div class="header-cell">No.</div>
          <div class="header-cell">商品名称</div>
          <div class="header-cell">评分</div>
          <div class="header-cell">数量</div>
          <div class="header-cell">占比</div>
        </div>
        <div class="table-body">
          <div
            class="table-row"
            v-for="(item, index) in productData"
            :key="index"
          >
            <div class="body-cell">No.{{ index + 1 }}</div>
            <div class="body-cell product-name">{{ item.name }}</div>
            <div class="body-cell">{{ item.score }}</div>
            <div class="body-cell">{{ item.count }}</div>
            <div class="body-cell">
              <div class="progress-bar">
                <div
                  class="progress"
                  :style="{ width: item.percentage + '%' }"
                ></div>
              </div>
              <span class="percentage">{{ item.percentage }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户画像分析 -->
    <div class="user-analysis">
      <div class="analysis-header">
        <span class="section-title">用户画像分析</span>
        <span class="data-count">数据量：24,652 条</span>
      </div>

      <!-- 用户年龄分布 -->
      <div class="distribution-section">
        <div class="distribution-header">
          <span class="distribution-title">用户年龄分布</span>
          <div class="tab-group">
            <span class="tab active">饼图</span>
            <span class="tab">环形图</span>
          </div>
        </div>
        <div class="chart-container">
          <echart
            ref="ageChart"
            :option="ageChartOption"
            canvasId="ageChart"
          ></echart>
        </div>
      </div>

      <!-- 用户性别分布 -->
      <div class="distribution-section">
        <div class="distribution-header">
          <span class="distribution-title">用户性别分布</span>
          <div class="tab-group">
            <span class="tab active">饼图</span>
            <span class="tab">环形图</span>
          </div>
        </div>
        <div class="chart-container">
          <echart
            ref="genderChart"
            :option="genderChartOption"
            canvasId="genderChart"
          ></echart>
        </div>
      </div>

      <!-- 年龄段分布 -->
      <div class="distribution-section">
        <div class="distribution-header">
          <span class="distribution-title">年龄段分布</span>
        </div>
        <div class="chart-container">
          <echart
            ref="ageBarChart"
            :option="ageBarChartOption"
            canvasId="ageBarChart"
          ></echart>
        </div>
      </div>
    </div>

    <!-- 地域分布 -->
    <div class="region-distribution">
      <div class="region-header">
        <span class="section-title">地域分布</span>
        <div class="tab-group">
          <span class="tab active">热力图</span>
          <span class="tab">列表</span>
        </div>
      </div>
      <div class="map-container">
        <image
          class="map-image"
          src="https://pic.hedashepin.com/upload/3/20250126/fcf59458af13a934059eb284fd1ea7ed.png"
        ></image>
      </div>
    </div>

    <!-- 优选笔记 -->
    <div class="featured-notes">
      <div class="featured-header">
        <span class="section-title">优选笔记</span>
      </div>
      <div class="notes-list">
        <div
          class="note-item"
          v-for="(item, index) in featuredNotes"
          :key="index"
        >
          <image class="note-image" :src="item.image"></image>
          <div class="note-content">
            <div class="note-span">{{ item.title }}</div>
            <div class="note-tag">
              <span
                class="tag"
                v-for="(tag, tagIndex) in item.tags"
                :key="tagIndex"
                >{{ tag }}</span
              >
            </div>
            <div class="note-interactions">
              <div>
                <span>
                  <image
                    class="note-interactions-icon"
                    src="https://pic.hedashepin.com/upload/3/20250409/d3d7091fe447785ed1c464199e1ddff7.png"
                  ></image>
                  {{ item.likes }}
                </span>
                <span>
                  <image
                    class="note-interactions-icon"
                    src="https://pic.hedashepin.com/upload/3/20250409/d3d7091fe447785ed1c464199e1ddff7.png"
                  ></image>
                  {{ item.comments }}
                </span>
              </div>
              <div>
                <span>
                  <image
                    class="note-interactions-icon"
                    src="https://pic.hedashepin.com/upload/3/20250409/d3d7091fe447785ed1c464199e1ddff7.png"
                  ></image>
                  {{ item.shares }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echart from "@/components/echart/echarts-uniapp/echarts-uniapp.vue";

export default {
  data() {
    return {
      // 商品评分数据
      productData: [
        { name: "有机大米", score: "4.9分", count: 768, percentage: 75 },
        { name: "手工豆腐", score: "4.7分", count: 367, percentage: 36 },
        { name: "农家土鸡蛋", score: "4.8分", count: 5, percentage: 0.5 },
        { name: "野生蘑菇", score: "4.6分", count: 28, percentage: 3 },
        { name: "山泉水", score: "4.5分", count: 12, percentage: 1 },
      ],

      // 年龄分布图表配置
      ageChartOption: {
        backgroundColor: "#ffffff",
        color: [
          "#579695",
          "#e8c48e",
          "#deb887",
          "#a78e44",
          "#c6e579",
          "#26c0c0",
        ],
        series: [
          {
            label: {
              normal: {
                fontSize: 12,
                formatter: "{b}: {d}%",
              },
            },
            type: "pie",
            center: ["50%", "50%"],
            radius: ["0%", "60%"],
            data: [
              { name: "18-24岁", value: 35.4 },
              { name: "25-29岁", value: 28.6 },
              { name: "30-39岁", value: 26.2 },
              { name: "40-49岁", value: 7.8 },
              { name: "50岁以上", value: 2.0 },
            ],
          },
        ],
      },

      // 性别分布图表配置
      genderChartOption: {
        backgroundColor: "#ffffff",
        color: ["#579695", "#e8c48e", "#deb887"],
        series: [
          {
            label: {
              normal: {
                fontSize: 12,
                formatter: "{b}: {d}%",
              },
            },
            type: "pie",
            center: ["50%", "50%"],
            radius: ["0%", "60%"],
            data: [
              { name: "男性", value: 34.0 },
              { name: "女性", value: 56.0 },
              { name: "未知", value: 10.0 },
            ],
          },
        ],
      },

      // 年龄段柱状图配置
      ageBarChartOption: {
        grid: {
          top: "10rpx",
          left: "10rpx",
          right: "30rpx",
          bottom: "10rpx",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "17岁以下",
            "18-24岁",
            "25-29岁",
            "30-39岁",
            "40-49岁",
            "50岁以上",
          ],
          axisLine: {
            lineStyle: {
              color: "#E5E5E5",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
          },
        },
        yAxis: {
          type: "value",
          offset: 10,
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E5E5E5",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "用户数量",
            type: "bar",
            itemStyle: {
              color: "#579695",
              borderRadius: [4, 4, 0, 0], // 可选的圆角效果
            },
            barWidth: "50%", // 控制柱子的宽度
            data: [5, 35, 28, 26, 8, 2],
          },
        ],
      },

      // 优选笔记数据
      featuredNotes: [
        {
          image:
            "https://pic.hedashepin.com/upload/3/20250126/fcf59458af13a934059eb284fd1ea7ed.png",
          title: "这个有机大米真的太好吃了，一定要推荐给大家~",
          tags: ["有机", "推荐"],
          likes: 211,
          comments: 56,
          shares: 23,
        },
        {
          image:
            "https://pic.hedashepin.com/upload/3/20250126/fcf59458af13a934059eb284fd1ea7ed.png",
          title: "农家手工豆腐的制作方法，太香了！",
          tags: ["手工", "美食"],
          likes: 189,
          comments: 42,
          shares: 18,
        },
      ],
    };
  },
  components: {
    echart,
  },
  mounted() {
    // 初始化图表
    setTimeout(() => {
      this.$refs.ageChart.init(this.ageChartOption);
      this.$refs.genderChart.init(this.genderChartOption);
      this.$refs.ageBarChart.init(this.ageBarChartOption);
    }, 300);
  },
  methods: {
    // 可以添加其他方法
  },
};
</script>

<style lang="scss" scoped>
.statistics-container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .back-icon {
    font-size: 32rpx;
    margin-right: 10rpx;
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.data-overview {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .overview-header {
    margin-bottom: 20rpx;

    .header-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .overview-grid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .grid-item {
      text-align: center;
      width: 22%;

      .item-label {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .item-value {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }

      .item-trend {
        font-size: 22rpx;

        &.up {
          color: #4caf50;
        }

        &.down {
          color: #ff6b6b;
        }
      }
    }
  }

  .note-preview {
    display: flex;
    padding: 20rpx;
    background: #f8f8f8;
    border-radius: 8rpx;

    .note-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .note-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .note-t {
        color: #666;
        border-radius: 20rpx;
        padding: 4rpx 12rpx;
        font-size: 22rpx;
        display: inline-block;
        margin-right: 8rpx;
        background-color: #f0f0f0;
      }

      .note-info-flex {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .note-title {
        font-size: 26rpx;
        color: #333;
        margin-bottom: 10rpx;
      }

      .note-stats {
        font-size: 24rpx;
        color: #999;

        span {
          margin-right: 20rpx;
        }
      }
    }

    .note-info-span {
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.product-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }

    .tab-group {
      display: flex;

      .tab {
        font-size: 24rpx;
        color: #666;
        padding: 4rpx 12rpx;
        margin-left: 10rpx;
        border-radius: 20rpx;

        &.active {
          background: #e8f4f4;
          color: #579695;
        }
      }
    }
  }

  .product-table {
    .table-header {
      display: flex;
      background: #f8f8f8;
      padding: 15rpx 0;
      border-radius: 8rpx 8rpx 0 0;

      .header-cell {
        flex: 1;
        text-align: center;
        font-size: 24rpx;
        color: #666;

        &:first-child {
          flex: 0.5;
        }

        &:nth-child(2) {
          flex: 2;
          text-align: left;
          padding-left: 10rpx;
        }
      }
    }

    .table-body {
      .table-row {
        display: flex;
        padding: 15rpx 0;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .body-cell {
          flex: 1;
          text-align: center;
          font-size: 24rpx;
          color: #333;
          display: flex;
          align-items: center;
          justify-content: center;

          &:first-child {
            flex: 0.5;
          }

          &:nth-child(2) {
            flex: 2;
            text-align: left;
            padding-left: 10rpx;
            justify-content: flex-start;
          }

          &:last-child {
            display: flex;
            align-items: center;

            .progress-bar {
              flex: 1;
              height: 10rpx;
              background: #f0f0f0;
              border-radius: 5rpx;
              margin-right: 10rpx;
              overflow: hidden;

              .progress {
                height: 100%;
                background: #579695;
                border-radius: 5rpx;
              }
            }

            .percentage {
              width: 60rpx;
              text-align: right;
              font-size: 22rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
}

.user-analysis {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }

    .data-count {
      font-size: 24rpx;
      color: #999;
    }
  }

  .distribution-section {
    margin-bottom: 30rpx;

    .distribution-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;

      .distribution-title {
        font-size: 26rpx;
        color: #333;
      }

      .tab-group {
        display: flex;

        .tab {
          font-size: 24rpx;
          color: #666;
          padding: 4rpx 12rpx;
          margin-left: 10rpx;
          border-radius: 20rpx;

          &.active {
            background: #e8f4f4;
            color: #579695;
          }
        }
      }
    }

    .chart-container {
      height: 400rpx;
      width: 100%;
    }
  }
}

.region-distribution {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .region-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }

    .tab-group {
      display: flex;

      .tab {
        font-size: 24rpx;
        color: #666;
        padding: 4rpx 12rpx;
        margin-left: 10rpx;
        border-radius: 20rpx;

        &.active {
          background: #e8f4f4;
          color: #579695;
        }
      }
    }
  }

  .map-container {
    height: 500rpx;
    width: 100%;

    .map-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.featured-notes {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;

  .featured-header {
    margin-bottom: 20rpx;

    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .notes-list {
    .note-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .note-image {
        width: 120rpx;
        height: 160rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
        flex-shrink: 0;
      }

      .note-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .note-span {
          font-size: 26rpx;
          color: #333;
          margin-bottom: 15rpx;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .note-tag {
          display: flex;
          gap: 10rpx;
          flex-wrap: wrap;
          margin-bottom: 15rpx;

          .tag {
            font-size: 22rpx;
            color: #666;
            background: #f0f0f0;
            border-radius: 20rpx;
            padding: 4rpx 12rpx;
          }
        }

        .note-interactions {
          font-size: 24rpx;
          color: #999;
          display: flex;
          justify-content: space-between;

          span {
            margin-right: 20rpx;
            display: inline-flex;
            align-items: center;

            .note-interactions-icon {
              width: 28rpx;
              height: 28rpx;
              margin-right: 6rpx;
            }
          }
        }
      }
    }
  }
}
</style>
